<template>
  <div class="app-container">
    <el-row>
      <!--单元楼数据-->
      <el-col :span="4">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入单元楼名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            ref="tree"
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="20">
        <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
          <el-form-item label="房间号" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入房间号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="户主" prop="userId">
            <el-input
              v-model="queryParams.userNickName"
              placeholder="请输入户主姓名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="人数" prop="num">
            <el-input
              v-model="queryParams.num"
              placeholder="请输入人数"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="面积" prop="area">
            <el-input
              v-model="queryParams.area"
              placeholder="请输入面积"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              v-hasPermi="['system:house:add']"
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
            >新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              v-hasPermi="['system:house:edit']"
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
            >修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              v-hasPermi="['system:house:remove']"
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
            >删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              v-hasPermi="['system:house:export']"
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
            >导出</el-button>
          </el-col>
          <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
        </el-row>

        <el-table v-loading="loading" :data="houseList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="房间号" align="center">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="户主" align="center" prop="userNickName" />
          <el-table-column label="人数" align="center" prop="num" />
          <el-table-column label="面积" align="center" prop="area" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-user"
                @click="handleMember(scope.row)"
              >成员</el-button>
              <el-button
                v-hasPermi="['system:house:edit']"
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              >修改</el-button>
              <el-button
                v-hasPermi="['system:house:remove']"
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

        <!-- 添加或修改房间表对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="100x">
            <el-form-item label="房间号" prop="name">
              <el-input v-model="form.name" placeholder="请输入房间号" />
            </el-form-item>
            <el-form-item label="户主" prop="userId">
              <el-popover
                ref="popoverRef"
                placement="bottom-start"
                trigger="click"
              >
                <el-input slot="reference" v-model="form.userNickName" placeholder="请输入选择户主" readonly />
                <c-select-user ref="selectUser" scope="internal" :single="true" @selectSingle="selectedUser" />
              </el-popover>
            </el-form-item>
            <el-form-item label="人数" prop="num">
              <el-input v-model="form.num" placeholder="请输入人数" />
            </el-form-item>
            <el-form-item label="面积" prop="area">
              <el-input v-model="form.area" placeholder="请输入面积" />
            </el-form-item>
            <el-form-item label="所属栋单元楼" prop="deptId">
              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择单元楼" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>

        <!-- 房间成员列表 -->
        <el-dialog :title="memberTitle" :visible.sync="memberDialog" width="70%" append-to-body>
          <el-table :data="memberList">
            <el-table-column label="序号" type="index" width="55" align="center" />
            <el-table-column label="姓名" prop="nickName" align="center" />
            <el-table-column label="用户名" prop="userName" align="center" />
            <el-table-column label="手机号" prop="phonenumber" align="center" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleRemoveMember(scope.row)"
                >移 除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancelMember">关 闭</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { rmMember, getMember, listHouse, getHouse, delHouse, addHouse, updateHouse, exportHouse } from '@/api/system/house'
import { treeselect } from '@/api/system/dept'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import cSelectUser from '../../tool/system/cSelectUser'

export default {
  name: 'House',
  components: {
    Treeselect,
    cSelectUser
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 选中的houseName
      names: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 房间表表格数据
      houseList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        userNickName: null,
        num: null,
        area: null,
        deptId: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: '房间号不能为空', trigger: 'blur' }
        ],
        deptId: [
          { required: true, message: '所属栋id不能为空', trigger: 'blur' }
        ]
      },
      // 单元楼树数据
      deptName: undefined,
      // 单元楼树数据
      deptOptions: undefined,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      deptQuery: {
        // 默认显示地址分组
        type: 2
      },
      /* 查询成员相关数据 */
      memberDialog: false,
      // 成员列表
      memberList: [],
      memberTitle: '',
    }
  },
  created() {
    this.getList()
    // 获取单元楼树结构
    this.getTreeSelect()
  },
  methods: {
    /** 查询房间表列表 */
    getList() {
      this.loading = true
      listHouse(this.queryParams).then(response => {
        this.houseList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        userId: null,
        num: null,
        area: null,
        deptId: null,
        userNickName: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.names = selection.map(item => item.name)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.form.deptId = this.queryParams.deptId
      this.open = true
      this.title = '添加房间表'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getHouse(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改房间表'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateHouse(this.form).then(response => {
              this.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addHouse(this.form).then(response => {
              this.msgSuccess('新增成功')
              this.open = false
              this.getList()
              this.getTreeSelect()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      const names = row.name || this.names
      this.$confirm('是否确认删除房间表编号为"' + names + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delHouse(ids)
      }).then(() => {
        this.getList()
        this.getTreeSelect()
        this.msgSuccess('删除成功')
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有房间表数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return exportHouse(queryParams)
      }).then(response => {
        this.download(response.msg)
      })
    },
    /* 单元楼树函数 */
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id
      this.getList()
    },
    /** 查询部门下拉树结构 */
    getTreeSelect() {
      treeselect(this.deptQuery).then((response) => {
        this.deptOptions = response.data
      })
    },
    /** 表单中选择了 user **/
    selectedUser(user) {
      this.form.userNickName = user.nickName
      this.form.userId = user.id
      this.$refs.popoverRef.doClose()
    },
    // 查询加入房屋的成员
    handleMember(house) {
      this.getMemberList(house.deptId)
      this.memberTitle = house.name + '  成员列表'
      this.memberDialog = true
    },
    getMemberList(deptId) {
      getMember(deptId).then(res => {
        this.memberList = res.data
      })
    },
    // 移除房间成员
    handleRemoveMember(member) {
      console.log(member)
      this.$confirm('是否确认移除"' + member.nickName + '"', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return rmMember(member.userId, member.deptId)
      }).then(() => {
        this.getMemberList(member.deptId)
        this.msgSuccess('移除成功')
      })
    },
    cancelMember() {
      this.memberDialog = false
    }
  }
}
</script>
